export const Pie3D3 = () =>{
  return `
  <template>
  <div
    class="content"
    :style="{
      height: height,
      width: width,
    }"
  >
    <img src="/vue.example/dizuo.png" class="dizuo3" alt="" />
    <div id="container3"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getSeriesPie3D, getParametricEquation } from "./tool";
import  "echarts";
import "echarts-gl";
const props = defineProps({
  width: {
    //列数据
    type: String,
    default: "930px",
  },
  height: {
    type: String,
    default: "492px",
  },
});
onMounted(() => {
  getEcharts();
});
const getEcharts = () => {
  let selectedIndex = "";
  let hoveredIndex = "";
  // 传入数据生成 option
  let data = [
    {
      name: "电气维保",
      value: 25,
      itemStyle: {
        color: "#00ADEF",
      },
    },
    {
      name: "机液维保",
      value: 20,
      itemStyle: {
        color: "#6E67E3",
      },
    },{
      name: "项目经理",
      value: 25,
      itemStyle: {
        color: "#E2698D",
      },
    },
    {
      name: "操作手",
      value: 20,
      itemStyle: {
        color: "#30B878",
      },
    },
  ];
  let series = getSeriesPie3D({
    pieData: data,
    internalDiameterRatio:0,
    bottomk: 0,
    pieHeight: 46,
  });
  let option = {
    fontFamily: "Source Han Sans CN",
    legend: {
      show: true,
      bottom: 10,
      itemHeight: 14,
      itemWidth: 24,
      itemGap: 30,
      textStyle: {
        color: "#D3E4FE",
        fontSize: 12,
        fontWeight: "400",
      },
      data: data,
    },
    tooltip: {
      formatter: (params) => {
        if (params.seriesName !== "mouseoutSeries") {
          return params.seriesName+"<br/><span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+params.color+";'></span>"+ series[params.seriesIndex].pieData.value;
        }
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },

    grid3D: {
      show: false,
      boxHeight: 15,
      height: "100%",
      width: "100%",
      //  postEffect:{
      //   enable:true
      //  },
      viewControl: {
        //3d效果可以放大、旋转等，请自己去查看官方配置
        alpha: 25,
        // 饼块开始得角度
        beta: 190,
        rotateSensitivity: 1,
        zoomSensitivity: 0,
        panSensitivity: 0,
        autoRotate: false,
        distance: 400,
        autoRotateSpeed: 10,
        autoRotateAfterStill: 10,
      },
    },
    series: series,
  };
  //构建3d饼状图
  let myChart = echarts.init(document.getElementById("container3"));
  // 传入数据生成 option
  myChart.setOption(option);

};
const count = ref(0);
const state = reactive({});
</script>

<style scoped >
.content {
  position: relative;
  background-color: #022b66;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  border: 1px solid rgba(19, 127, 212, 0.6);
}
#container3 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
}
.dizuo3 {
  z-index: 1;
  position: absolute;
  bottom: 106px;
  left: 50%;
  width: 443px;
  height: 151px;
  transform: translateX(-48%);
}
</style>

  
  `
}